@class-prefix-template-loading-ball-pulse: ~'template-loading-ball-pulse';

.@{class-prefix-template-loading-ball-pulse} {
  --width: var(--tfc-15);
  --height: var(--tfc-15);
  --margin: var(--tfc-2);
  --color: #fff;

  &__item {
    background-color: var(--color);
    width: var(--width);
    height: var(--height);
    border-radius: 100%;
    margin: var(--margin);
    animation-fill-mode: both;
    display: inline-block;
  }

  &__item:nth-child(1) {
    animation: template-loading-keyframes-ball-pulse 1.3s -0.24s infinite
      cubic-bezier(0.2, 0.68, 0.18, 1.08);
  }

  &__item:nth-child(2) {
    animation: template-loading-keyframes-ball-pulse 1.3s -0.12s infinite
      cubic-bezier(0.2, 0.68, 0.18, 1.08);
  }

  &__item:nth-child(3) {
    animation: template-loading-keyframes-ball-pulse 1.3s 0s infinite
      cubic-bezier(0.2, 0.68, 0.18, 1.08);
  }
}

@keyframes template-loading-keyframes-ball-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  45% {
    transform: scale(0.1);
    opacity: 0.7;
  }

  80% {
    transform: scale(1);
    opacity: 1;
  }
}
